<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <title>影片列表</title>
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="add()">
    <i class="layui-icon">&#xe67c;</i>上架
</button>

<!-- 弹出层中的表单模板 -->
<form id="roleEditForm" class="layui-form" action="filmadd" method="post" enctype="multipart/form-data"
      style="display:none;padding-top:10px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">电影名称</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="name" id="f_name" placeholder="电影名称">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">导演</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="director" id="f_director" placeholder="导演">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">主演</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="player" id="f_players" placeholder="主演：xx,xx">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">电影类型</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="type" id="f_type" placeholder="电影类型">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">制片地区</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="country" id="f_country" placeholder="制片地区">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">片长</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="length" id="f_length" placeholder="片长：分钟">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">剧情介绍</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="synopsis" id="f_synopsis" placeholder="剧情">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">上映时间</label>
            <div class="layui-input-inline">
                <input type="date" class="layui-input" name="time" id="test5" placeholder="yyyy-MM-dd">
            </div>
        </div>
    </div>

    <div style="padding-left: 30px;">
        <input type="file" name="img">
    </div>



    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="closeEditWin()">取消</button>
        </div>
    </div>

</form>

<table class="layui-hide" id="test"></table>


<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>

    layui.use(['table','layer'], function () {
        var table = layui.table;
        var layer = layui.layer;

        table.render({
            elem: '#test',
            url: 'filmAll',
            // cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            //     ,
            cols: [
                [{
                    field: 'filmId',
                    align: 'center',
                    width: 100,
                    title: 'ID',
                    sort: true
                }, {
                    field: 'name',
                    align: 'center',
                    title: '影片'
                }, {
                    field: 'imgPath',
                    align: 'center',
                    title: '海报',
                    templet:function (d) {
                        return '<div ><img src="'+d.imgPath+'" alt="" width="80px" height="124px" onclick="showBigImage(this)" /></div>'
                    }
                }, {
                    field: 'director',
                    align: 'center',
                    title: '导演'
                }, {
                    field: 'player',
                    align: 'center',
                    title: '主演'
                }, {
                    field: 'type',
                    align: 'center',
                    title: '类型'
                }, {
                    field: 'country',
                    align: 'center',
                    title: '制片地区'
                }, {
                    field: 'length',
                    align: 'center',
                    width: 60,
                    title: '片长'
                }, {
                    field: 'synopsis',
                    align: 'center',
                    title: '剧情介绍'
                }, {
                    field: 'time',
                    align: 'center',
                    title: '上映时间'
                }, {
                    field: 'setup',
                    align: 'center',
                    width: 60,
                    title: '设置'
                }]
            ],
            page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
            },
            limit: 5,
            limits: [1, 2, 3, 4, 5]

        });

    });
    function showBigImage(e) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            offset:'t',
            shadeClose: true, //点击阴影关闭
            content: "<img src=" + $(e).attr('src') + " width='270px' height='398px' />"
        });
    }
    function add() {
        var obj = {
            "action": "filmadd",
            "tit": "上架电影"
        }
        popupwin(obj);
    }

    function popupwin(obj) {
        layui.use(['layer'], function () {
            var layer = layui.layer;
            var $ = layui.jquery;
            $('#roleEditForm').attr('action', obj.action);
            layer.open({
                type: 1, //5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                area: [400,500], //宽高
                offset:'t',
                title: obj.tit,
                content: $('#roleEditForm')
            });
        });
    }

    function closeEditWin() {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.closeAll();
        });
    }
    layui.use('layer', function () {
        var layer = layui.layer;
        ${msg}
    });

</script>
</body>

</html>